<template>
  <h1 v-if="route.path ==='/home/addbed'">添加房间</h1>
  <h1 v-else>修改房间</h1>
  <el-form
    :model="form.data"
    :rules="rules"
    ref="ruleFormRef"
    :hide-required-asterisk="true"
    label-width="120px">


        <el-form-item label="房间号" prop="roomId">
          <el-select v-model="form.data.roomId"
                     placeholder="请选择房间号"
                     :clearable="true"
                     @change="roomIdChange">
            <el-option v-for="item in roomIds.data"
                       :key="item.roomId"
                       :label="item.roomNumber"
                       :value="item.roomId" />
          </el-select>
        </el-form-item>


        <el-form-item label="病床号" prop="bedNum">
          <el-select v-model="form.data.bedNum" placeholder="请选择房间号" :clearable="true">
            <el-option v-for="item in bedNums.data"
                       :key="item.bedNum"
                       :label="item.bedNum"
                       :value="item.bedNum" />
          </el-select>
        </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit(ruleFormRef)" v-if="route.path==='/home/addbed'">添加</el-button>
      <el-button v-else type="primary" @click="onSubmit(ruleFormRef)">修改</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>

</template>

<script lang="js" setup>
import { onMounted, reactive, ref, toRaw, toRefs, unref } from "vue";
import {
  addEmployee,
  deleteEmployeeById,
  getDepartmentNameId,
  getEmployeeOne,
  login,
  updateEmployee
} from "@/utils/api";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";
import router from "@/router";
import { getRoomIdAndNumberApi } from "@/utils/RoomRequest";
import { addBedApi, getBedDataOneApi, getBedNumApi, updateBedApi } from "@/utils/BedRequest";

const route = useRoute();

const form = reactive({
  data: {
    "bedNum": "",
    "roomId": ""
  }
});

//病房的id和房间号
const roomIds = reactive({
  data: []
});

const bedNums = reactive({
  data: []
});


//表单校验规则
const rules = reactive({
  roomId: [
    { required: true, message: "请选择房间号", trigger: "blur" }
  ],
  bedNum: [
    { required: true, message: "请输入病床号", trigger: "blur" }
  ]
});


const ruleFormRef = ref();


//重置
const reset = () => {
  form.data = {};
};

onMounted(() => {
  getRooIdAndRoomNumber(3);
  if (route.path !== "/home/addbed") {
    getRoomData(route.query.id);
  }
});


//获取病房间的id和房间号
const getRooIdAndRoomNumber = async (id) => {
  //发送请求
  let res = await getRoomIdAndNumberApi(id);
  // 为roomIds.data 赋值
  roomIds.data = res.data;
};



//获取未设置的病房号
const roomIdChange = async (id) => {
  let res = await getBedNumApi(id);
  bedNums.data = res.data;
};

//发送添加请求
const addBedRequest = async (fromDate) => {
  let res = await addBedApi(fromDate);
  if (res.data) {
    ElMessage({
      type: "success",
      message: "添加成功"
    });
    router.push({
      path: "/home/bed"
    });
  }
};

//回显要修改员工的数据
const getRoomData = async (id) => {
  let res = await getBedDataOneApi(id)
  console.log(res);
  form.data.roomId = res.data.roomId
  form.data.bedNum = res.data.bedNum
  roomIdChange(form.data.roomId);
};


//提交表单的回调
const onSubmit = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (!valid) {
      return false;
    } else {
      //发送请求
      if (route.path === "/home/addbed") {
        addBedRequest(form.data);
      } else {
        ElMessageBox.confirm(
          "确定要修改吗?",
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(async () => {
            //发送修改的请求
            let res = await updateBedApi(form.data);
            if (res.data) {
              ElMessage({
                type: "success",
                message: "修改成功"
              });
              router.push({
                path: "/home/bed"
              });
            } else {
              ElMessage({
                type: "error",
                message: "修改失败"
              });
            }
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "取消修改"
            });
          });
      }
    }
  });
};

</script>


<style scoped>
</style>